<template>
    <el-dialog :visible="visible" :title="title" @close="close" width="56%" :close-on-click-modal="false">
        <el-tabs v-model="activeName" @tab-click="handleClick" stretch>
            <el-tab-pane label="基础信息" name="first">
                <el-form ref="form1" :model="pushRule" label-position="top">
                    <el-col :span="24">
                        <el-form-item
                        label="名称"
                        prop="name"
                        :rules="[{ required: true, message: '请输入名称', trigger: 'blur' }]"
                        >
                        <el-input v-model="pushRule.name" placeholder="请输入名称" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-col :span="11">
                            <el-form-item
                            label="触发时机"
                            prop="type"
                            :rules="[{ required: true, message: '请选择触发时机', trigger: 'blur' }]"
                            >
                            <el-select v-model="pushRule.type" placeholder="请选择触发时机" clearable style="width: 100%;">
                            <el-option label="设备状态上报" :value="0" />
                            <el-option label="设备上线" :value="1" />
                            <el-option label="设备下线" :value="2" />
                            </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="2"></el-col>
                        <el-col :span="11">
                            <el-form-item
                            label="最小时间间隔"
                            prop="timeInterval"
                            :rules="[{ required: true, message: '请输入最小时间间隔', trigger: 'blur' }]"
                            >
                            <el-input-number class="mynumber" v-model="pushRule.timeInterval"  label="请输入最小时间间隔" :min="0"></el-input-number>
                        </el-form-item>
                        </el-col>
                    </el-col>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="条件" name="second">
                <el-form ref="form2" :model="pushRule" label-position="top">
                    <el-col :span="24">
                        <el-form-item
                        label="触发属性"
                        prop="propertyId"
                        :rules="[{ required: true, message: '请选择触发属性', trigger: 'blur' }]"
                        >
                        <el-select v-model="pushRule.propertyId" placeholder="请选择触发属性" clearable style="width: 100%;">
                        <el-option label="1" :value="0" />
                        <el-option label="2" :value="1" />
                        <el-option label="3" :value="2" />
                        </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-col :span="11">
                            <el-form-item
                            label="触发条件"
                            prop="equalCondition"
                            :rules="[{ required: true, message: '请选择触发属性', trigger: 'blur' }]"
                            >
                            <el-select v-model="pushRule.equalCondition" placeholder="请选择触发属性" clearable style="width: 100%;">
                            <el-option label="=" :value="0" />
                            <el-option label=">" :value="1" />
                            <el-option label="<" :value="2" />
                            </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="2"></el-col>
                        <el-col :span="11">
                            <el-form-item
                            label="触发值"
                            prop="value"
                            :rules="[{ required: true, message: '请选择触发值', trigger: 'blur' }]"
                            >
                            <el-select v-model="pushRule.value" placeholder="请选择触发值" clearable style="width: 100%;">
                            <el-option label="1" :value="0" />
                            <el-option label="2" :value="1" />
                            <el-option label="3" :value="2" />
                            </el-select>
                            </el-form-item>
                        </el-col>
                    </el-col>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="动作" name="third">
                <el-form ref="form3" :model="pushRule" label-position="top">
                    <el-col :span="24">
                        <el-form-item
                            label="标题"
                            prop="title"
                            :rules="[{ required: true, message: '请输入推送标题', trigger: 'blur' }]"
                            >
                           <el-input v-model="pushRule.title" placeholder="请输入推送标题" clearable />
                            </el-form-item>
                    </el-col>
                  <el-col :span="24">
                        <el-form-item
                          label="内容"
                          prop="message" :rules="[{ required: true, message: '请输入推送内容', trigger: 'blur' }]">
                          <el-input type="textarea" resize="none" :autosize="{ minRows: 3, maxRows: 3 }" v-model="pushRule.message" placeholder="请输入推送内容" clearable/>
                        </el-form-item>
                  </el-col>
                </el-form> 
            </el-tab-pane>
          </el-tabs>
          <span slot="footer">
                    <el-button @click="close">取 消</el-button>
                    <el-button @click="lastStep" v-show="showLastStep">上一步</el-button>
                    <el-button type="primary" @click="confirm">{{ showLastStepContent }}</el-button>
        </span>
    </el-dialog>
</template>
<script>
export default {
    name: 'pushEdit',
    props: {
        operation: {
            default: 'add',
            validator: (value) => {
                return ['add', 'update'].indexOf(value) !== -1;
            },
        },
        visible: {
            type: Boolean,
            required: true,
        },
        pushRule:{
            type: Object,
            required: true,
        }
    },
    data () {
        return {
            data1: {"msgId": 1,"action": "devSend","params": {"devTid": "ESP_2M_245EC89","appTid": []}},
            data2: {"msgId": 1,"action": "appSend","params": {"devTid": "ESP_2M_245EC89","ctrlKey": "01335a277ffc3c5fc9ba40df63a3e25c","appTid": []}},
            activeName:"first",
            lastStepVisible:false,
        }
    },
    computed: {
        title () {
            return  '新增告警规则'
        },
        showLastStep () {
            if(this.activeName==='first'){
                return false;
            }else{
                return true;
            }
        },
        showLastStepContent () {
            if(this.activeName==='first'||this.activeName==='second'){
                return '下一步';
            }else{
                return '确定';
            }
        }
    },
    methods: {
        close() {
            this.$emit('update:visible', false);
        },
        async confirm() {

            if(this.activeName==='first'){
                this.activeName = 'second';
            }else if(this.activeName==='second'){
                this.activeName = 'third';
            }else{
                try {
                    await this.$refs.form.validate();

                    if(this.operation==='add')
                    this.$message.success({'message':'新增成功'});
                    else
                    this.$message.success({'message':'修改成功'});
                    this.$emit('confirm');
                } catch (e) {
                    console.error(e);
                }
            }
        },
        handleClick(tab, event){
           console.log(tab,event);
        },
        lastStep (e){
            let target = e.target;
            // 根据button组件内容 里面包括一个span标签，如果设置icon，则还包括一个i标签，其他情况请自行观察。
            // 所以，在我们点击到button组件上的文字也就是span标签上时，直接执行e.target.blur()不会生效，所以要加一层判断。
            if (target.nodeName === 'SPAN' || target.nodeName === 'I') {
                target = e.target.parentNode;
            }
            target.blur();

            if(this.activeName==='second'){
                this.activeName = 'first';
            }else if(this.activeName==='third'){
                this.activeName = 'second';
            }
            
        }
    },
}
</script>
<style>
.el-input-number.mynumber {
    position: relative;
    display: inline-block;
    width: 100%;
    line-height: 38px;
}
</style>